<template>
<div class='goodslist-container'>
    <transition
        @before-enter = "beforeEnter"
        @enter = "enter"
        @after-enter = "afterEnter">
        <div class="ball" v-show="ballflag" ref="ball"></div>
    </transition>
    <!-- 轮播图区域 -->
    <div class="mui-card">
		<div class="mui-card-content">
			<div class="mui-card-content-inner">
				<swiper :lunbotuList='lunbotu' isFull='false'></swiper>
			</div>
		</div>
	</div>

    <!-- 商品购买区域 -->
    <div class="mui-card">
		<div class="mui-card-header">商品的名称</div>
		<div class="mui-card-content">
			<div class="mui-card-content-inner">
				<p class="price">
                    市场价：￥<del>2399</del> &nbsp;&nbsp;销售价：<span class="sell_price">￥1999</span>
                </p>
                <p class="shopping_nub">
                    购买数量：<numbox  ></numbox>
                    <!-- 购买数量：<numbox @getcount='getSelectedCount' :max='goodsInfo.stock_quantity'></numbox> -->
                </p>
                <mt-button type='primary' size='small'>立即购买</mt-button>
                <mt-button type='danger' size='small' @click='addToShopCar' >加入购物车</mt-button>
                <!-- 分析如何在父组件拿到子组件中的文本框的值，并输出
                    涉及到了子组件向父组件传值，利用了传递事件的机制
                 -->

			</div>
		</div>
	</div>
    <!-- <div class="mui-card">
		<div class="mui-card-header">{{goodsInfo.title}}</div>
		<div class="mui-card-content">
			<div class="mui-card-content-inner">
				<p class="price">
                    市场价：￥<del>{{goodsInfo.market_price}}</del> &nbsp;&nbsp;销售价：<span class="sell_price">￥{{goodsInfo.sell_price}}</span>
                </p>
                <p class="shopping_nub">
                    购买数量：<numbox></numbox>
                </p>
                <mt-button type='primary' size='small'>立即购买</mt-button>
                <mt-button type='danger' size='small'>加入购物车</mt-button>

			</div>
		</div>
	</div> -->
    <!-- 商品参数区域 -->
    <!-- <div class="mui-card">
		<div class="mui-card-header">商品参数</div>
		<div class="mui-card-content">
			<div class="mui-card-content-inner">
				<p>商品货号：{{goodsInfo.goods_no}}</p>
                <p>库存情况：{{goodsInfo.stock_quantity}}件</p>
                <p>上架时间：{{goodsInfo.add_time | dateFormat}}</p>
			</div>
		</div>
		<div class="mui-card-footer">
            <mt-button type='primary' size='large' plain>图文介绍</mt-button>
            <mt-button type='danger' size='large' plain>商品详情</mt-button>

        </div>
	</div> -->
    <div class="mui-card">
		<div class="mui-card-header">商品参数</div>
		<div class="mui-card-content">
			<div class="mui-card-content-inner">
				<p>商品货号：SD2932214404</p>
                <p>库存情况：60件</p>
                <p>上架时间：2015-04-20  01:19:30</p>
			</div>
		</div>
		<div class="mui-card-footer">
            <mt-button type='primary' size='large' plain @click="goGoodsDesc">图文介绍</mt-button>
            <mt-button type='danger' size='large' plain @click="goGoodsComment">商品评论</mt-button>

        </div>
	</div>
</div>
</template>

<script>
// 引入评论子组件
import swiper from '../subcomment/swiper.vue'
import numbox from '../subcomment/goodsnfo_numbox.vue'
export default {
    data(){
        return{
            id: this.$route.params.id,
            lunbotu: [],
            goodsInfo: {},
            ballflag: false,
            selectedCount: 1

        }
    },
    created(){
        this.getLunbotu();
        this.getGoodsInfo()
    },
    methods:{
        getLunbotu(){
            this.$http.get("api/getthumimages/"+this.id).then(result => {
                if(result.body.status ===0){
                    this.lunbotu = result.body.message;
                }else{

                }
            })
        },
        getGoodsInfo(){
            this.$http.get('api/goods/getinfo/'+this.id).then(result => {
                if(result.body.status === 0){
                    this.goodsInfo=result.body.message[0]
                }
            })
        },
        goGoodsDesc(){
            // 使用编程式导航实现路由页面跳转
            this.$router.push({path:'/home/goodsdesc/'})
        },
        goGoodsComment(){
            this.$router.push({path:'/home/goodscomment/'})
        },
        addToShopCar(){
            this.ballflag=!this.ballflag
            var goodsinfo= {
                id:this.id,
                count:this.selectedCount,
                price:this.goodsInfo.sell_price,
                selected:true
            }
            this.$store.commit("addToCar",goodsinfo)
        },
        beforeEnter(el){
            el.style.transform = "translate(0,0)"
        },
        enter(el,done){
            el.offsetWidth;
            const ballPosition = this.$refs.ball.getBoundingClientRect();
            const  badgePosition = document
                .getElementById('badge')
                .getBoundingClientRect();
            const xDist = badgePosition.left-ballPosition.left;
            const yDist = badgePosition.top-ballPosition.top;
            el.style.transform = `translate(${xDist}px,${yDist}px)`;
            el.style.transition = "all 1s cubic-bezier(.4,-0.3,1,.68)";
            done();
        },
        afterEnter(el){
            this.ballflag=!this.ballflag
        },
        getSelectedCount(count){
            this.selectedCount = count;
            console.log(this.selectedCount)
        }
    },
    //注册评论子组件
    components:{
        swiper,
        numbox
    }
}
</script>

<style lang="scss" scoped>
.goodslist-container{
    background-color: #ccc;
    overflow: hidden;
    .sell_price{
        color: red;
        font-weight: bold;
        font-size: 14px;
    }
    .ball{
        width: 15px;
        height: 15px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        z-index: 99;
        top: 390px;
        left: 147px;
        
    }
}
.mui-card-footer{
    display: block;
    button{
        margin:15px 0;
    }
}
</style>